<template>
  <div class="limitbuy">
    <div class="title">
      <p>正品保障 限时秒杀</p>
      <p>每日限量秒杀 &nbsp;先到先得</p>
    </div>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in limitTime"
        :key="item.id"
        :text="item.desc"
      >
        <template #icon>
          <p>{{ item.time }}</p>
        </template>
      </van-grid-item>
    </van-grid>
    <van-card
      v-for="goods in goodslist"
      :key="goods.goodsId"
      :title="goods.goodsBrief"
    >
      <template #desc>
        <div class="price">
          <p>秒</p>
          <p>￥{{ goods.goodsPrice }}</p>
        </div>
      </template>
      <template #thumb>
        <img
          v-lazy="goods.goodsImg"
          alt=""
        />
      </template>
      <template #price>
        <del>原价：{{ goods.goodsPrice }}</del>
      </template>
      <template #num>
        <div class="probar">
          <van-progress
            inactive
            :show-pivot="show_pivot"
            :percentage="50"
          />
          <div class="stocks">仅剩{{ goods.goodsPrice }}件</div>
          <div
            class="go"
            @click="goDetail(goods.goodsId)"
          >
            去秒杀
          </div>
          <router-view></router-view>
        </div>
      </template>
    </van-card>
  </div>
</template>
<script>
import { getCategories } from '@/api/todos';
export default {
  data() {
    return {
      show_pivot: false,
      limitTime: [
        {
          id: 0,
          time: '10:00',
          desc: '正在秒杀',
        },
        {
          id: 1,
          time: '17:00',
          desc: '即将开始',
        },
        {
          id: 2,
          time: '8:00',
          desc: '明日预告',
        },
      ],
      goodslist: [],
    };
  },
  created() {
    this.getCategories();
  },
  methods: {
    async getCategories() {
      const res = await getCategories();
      this.goodslist = res.data;
      console.log(res.data);
    },
    goDetail(id) {
      this.$router.push('/home/limitbuy/shopdetail?id=' + id);
    },
  },
};
</script>
<style lang="scss">
.limitbuy {
  margin-top: 46px;
  .title {
    width: 343px;
    height: 104px;
    margin: 0 auto;
    background-color: #d9d9d9;
    text-align: center;
    & :first-child {
      font-size: 28px;
      margin-top: 10px;
      padding-top: 10px;
    }
    & :last-child {
      font-size: 14px;
      margin-top: -10px;
    }
  }
  .van-grid-item__content--center {
    padding: 0 8px;
  }
  .van-grid-item__icon-wrapper {
    p {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 6px;
    }
  }
  .van-grid-item__text {
    font-size: 14px;
    color: #101010;
  }
  .van-card {
    img {
      width: 90px;
      height: 90px;
    }
    .van-card__title {
      font-size: 14px;
      color: #101010;
      font-weight: 600;
    }
    .price {
      display: flex;
      & :first-child {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #717171;
        color: #fff;
        text-align: center;
        font-weight: 600;
      }
      & :last-child {
        font-size: 16px;
        color: #101010;
        font-weight: 600;
        font-style: italic;
        margin: 10px 10px 0;
      }
    }
  }
  .probar {
    margin-top: -30px;
    .van-progress {
    }
    .go {
      width: 88px;
      height: 28px;
      background-color: #717171;
      text-align: center;
      font-size: 14px;
      color: #fff;
      line-height: 28px;
    }
    .stocks {
      color: #101010;
    }
  }
}
</style>
